import Base from "./base.js";
import adminServices from "../service/adminService.js";
export default class extends Base {

    //渲染,用来描述模块的结构，html
    render() {
        const template = `
            <div id="bigBox" style="width:400px;margin:100px auto;border:10px solid rgba(0,0,0,0.2)">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>管理员注册</legend>
                </fieldset>
                <form class="layui-form" action="" >
                    <div class="layui-form-item reg-box" style="position: relative;">
                        <input style="width:300px;margin:auto" type="text" name="adminName" placeholder="用户名>字母开头" autocomplete="off" class="layui-input"required
                        lay-verify="required|adminName" lay-verType="tips">
                        <i class="layui-icon layui-icon-username" style="font-size: 20px;color:gray; position: absolute;right:55px;top:10px"></i>  
                            <span style="margin-left:50px"></span>
                    </div>
                    <div class="layui-form-item reg-box" style="position: relative;">
                        <input  style="width:300px;margin:auto" type="password" name="adminPassword" 
                            placeholder="密码" autocomplete="off" class="layui-input" required lay-verify="required|pass" lay-verType="tips">
                            <i class="layui-icon layui-icon-password" style="font-size: 20px;color:gray; position: absolute;right:55px;top:10px"></i>
                    </div>

                    <div class="layui-form-item ">
                            <button style="width:300px;margin-left:50px" class="layui-btn regBtn" type="button" >立即注册</button>
                    </div>
                </form>
            </div>
        `
        this.$el.html(template);
    }
    //注册
    async reg(admin) {
       const status= await adminServices.reg(admin);
        return status;
    }
    //验证注册名
    async isUse(admin) {
        const status = await adminServices.isUse(admin);
        return status;
    }
    //交互
    handle() {
        //注册按钮点击事件
        $(".regBtn").on("click", async e => {
            const adminName = $(".reg-box input[name=adminName]").val();
            const adminPassword = $(".reg-box input[name=adminPassword]").val();
            if(/^[a-zA-Z]\w{1,10}$/.test(adminName)){
                const status = await this.reg({ adminName, adminPassword });
                if (status) {
                    layer.msg("注册成功！");
                    location.hash = `#/loginWith/${adminName}`;
                }
            }else{
                $(".reg-box span").html("账号密码有误或为空！");
            }
        })
        //注册输入框失焦事件
        $(".reg-box input[name=adminName]").on("blur", async e => {
            const adminName = $(".reg-box input[name=adminName]").val();
            if(/^[a-zA-Z]\w{1,10}$/.test(adminName)){
                const status = await this.isUse({ adminName })
                if (status) {
                    $(".reg-box span").html("管理员账号已存在");
                    $(".reg-box span").css({ "color": "red" })
                    $(".regBtn").prop("disabled", true);
                } else {
                    $(".reg-box span").html("管理员账号可使用");
                    $(".reg-box span").css({ "color": "green" })
                    $(".regBtn").prop("disabled", false);
                }
            }else{
                $(".reg-box span").html("账号不符合规则，以字母开头！");
                $(".reg-box span").css({ "color": "red" })
            }
        })
    }
}